<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机展示不同颜色的小球</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            position: absolute;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    var body=document.getElementsByTagName('body')[0];
    var arr="123456789abcdef";
    for (var i = 0; i < 100; i++) {
        body.innerHTML+="<div id="+i+"></div>";
        var n="#";
        for (var j = 0; j <6; j++) {
            n+=arr.charAt( Math.floor(Math.random()*arr.length));
        }
        document.getElementById(i).style.backgroundColor=n;
        document.getElementById(i).style.left=Math.floor(Math.random()*1820)+"px";
        document.getElementById(i).style.top=Math.floor(Math.random()*843)+"px";
    }

</script>
<div id="0" style="background-color: rgb(65, 236, 44); left: 760px; top: 451px;"></div>
<div id="1" style="background-color: rgb(183, 43, 198); left: 1370px; top: 42px;"></div>
<div id="2" style="background-color: rgb(61, 168, 116); left: 238px; top: 502px;"></div>
<div id="3" style="background-color: rgb(239, 180, 86); left: 1750px; top: 647px;"></div>
<div id="4" style="background-color: rgb(94, 122, 140); left: 1043px; top: 268px;"></div>
<div id="5" style="background-color: rgb(249, 219, 85); left: 1629px; top: 83px;"></div>
<div id="6" style="background-color: rgb(187, 145, 205); left: 229px; top: 671px;"></div>
<div id="7" style="background-color: rgb(185, 233, 194); left: 1154px; top: 832px;"></div>
<div id="8" style="background-color: rgb(222, 253, 172); left: 1778px; top: 336px;"></div>
<div id="9" style="background-color: rgb(18, 165, 22); left: 1293px; top: 215px;"></div>
<div id="10" style="background-color: rgb(245, 239, 27); left: 327px; top: 36px;"></div>
<div id="11" style="background-color: rgb(124, 103, 114); left: 1207px; top: 158px;"></div>
<div id="12" style="background-color: rgb(165, 76, 117); left: 1729px; top: 808px;"></div>
<div id="13" style="background-color: rgb(45, 178, 104); left: 1505px; top: 385px;"></div>
<div id="14" style="background-color: rgb(235, 148, 143); left: 408px; top: 383px;"></div>
<div id="15" style="background-color: rgb(85, 33, 103); left: 756px; top: 663px;"></div>
<div id="16" style="background-color: rgb(179, 230, 20); left: 960px; top: 324px;"></div>
<div id="17" style="background-color: rgb(233, 23, 206); left: 875px; top: 310px;"></div>
<div id="18" style="background-color: rgb(89, 26, 167); left: 58px; top: 291px;"></div>
<div id="19" style="background-color: rgb(196, 186, 119); left: 1393px; top: 467px;"></div>
<div id="20" style="background-color: rgb(238, 150, 114); left: 1252px; top: 578px;"></div>
<div id="21" style="background-color: rgb(156, 59, 119); left: 858px; top: 488px;"></div>
<div id="22" style="background-color: rgb(40, 201, 179); left: 969px; top: 747px;"></div>
<div id="23" style="background-color: rgb(25, 69, 108); left: 25px; top: 582px;"></div>
<div id="24" style="background-color: rgb(198, 202, 57); left: 1661px; top: 42px;"></div>
<div id="25" style="background-color: rgb(72, 94, 188); left: 1116px; top: 655px;"></div>
<div id="26" style="background-color: rgb(215, 194, 159); left: 122px; top: 202px;"></div>
<div id="27" style="background-color: rgb(126, 237, 185); left: 460px; top: 400px;"></div>
<div id="28" style="background-color: rgb(131, 214, 104); left: 109px; top: 38px;"></div>
<div id="29" style="background-color: rgb(188, 158, 126); left: 210px; top: 449px;"></div>
<div id="30" style="background-color: rgb(127, 42, 114); left: 1272px; top: 276px;"></div>
<div id="31" style="background-color: rgb(129, 116, 93); left: 1444px; top: 12px;"></div>
<div id="32" style="background-color: rgb(190, 177, 188); left: 370px; top: 95px;"></div>
<div id="33" style="background-color: rgb(169, 69, 254); left: 1158px; top: 420px;"></div>
<div id="34" style="background-color: rgb(133, 129, 146); left: 1114px; top: 482px;"></div>
<div id="35" style="background-color: rgb(105, 235, 235); left: 1505px; top: 254px;"></div>
<div id="36" style="background-color: rgb(57, 166, 177); left: 1286px; top: 184px;"></div>
<div id="37" style="background-color: rgb(120, 174, 230); left: 645px; top: 166px;"></div>
<div id="38" style="background-color: rgb(39, 161, 40); left: 1392px; top: 711px;"></div>
<div id="39" style="background-color: rgb(179, 28, 172); left: 1291px; top: 431px;"></div>
<div id="40" style="background-color: rgb(212, 118, 190); left: 472px; top: 805px;"></div>
<div id="41" style="background-color: rgb(248, 179, 94); left: 1374px; top: 575px;"></div>
<div id="42" style="background-color: rgb(116, 21, 129); left: 623px; top: 100px;"></div>
<div id="43" style="background-color: rgb(82, 61, 75); left: 306px; top: 131px;"></div>
<div id="44" style="background-color: rgb(194, 223, 56); left: 454px; top: 329px;"></div>
<div id="45" style="background-color: rgb(91, 153, 172); left: 203px; top: 66px;"></div>
<div id="46" style="background-color: rgb(132, 77, 132); left: 1358px; top: 256px;"></div>
<div id="47" style="background-color: rgb(229, 59, 136); left: 1231px; top: 461px;"></div>
<div id="48" style="background-color: rgb(238, 38, 238); left: 1359px; top: 365px;"></div>
<div id="49" style="background-color: rgb(30, 251, 75); left: 338px; top: 259px;"></div>
<div id="50" style="background-color: rgb(146, 62, 203); left: 1245px; top: 636px;"></div>
<div id="51" style="background-color: rgb(77, 232, 155); left: 1253px; top: 537px;"></div>
<div id="52" style="background-color: rgb(159, 115, 93); left: 1164px; top: 467px;"></div>
<div id="53" style="background-color: rgb(204, 253, 253); left: 1583px; top: 25px;"></div>
<div id="54" style="background-color: rgb(143, 197, 159); left: 245px; top: 184px;"></div>
<div id="55" style="background-color: rgb(153, 59, 156); left: 1707px; top: 156px;"></div>
<div id="56" style="background-color: rgb(202, 174, 35); left: 1577px; top: 531px;"></div>
<div id="57" style="background-color: rgb(167, 218, 150); left: 1774px; top: 595px;"></div>
<div id="58" style="background-color: rgb(251, 250, 173); left: 1794px; top: 496px;"></div>
<div id="59" style="background-color: rgb(239, 154, 126); left: 274px; top: 508px;"></div>
<div id="60" style="background-color: rgb(164, 205, 204); left: 376px; top: 62px;"></div>
<div id="61" style="background-color: rgb(137, 170, 95); left: 448px; top: 141px;"></div>
<div id="62" style="background-color: rgb(91, 47, 102); left: 194px; top: 127px;"></div>
<div id="63" style="background-color: rgb(55, 248, 170); left: 1669px; top: 311px;"></div>
<div id="64" style="background-color: rgb(155, 182, 142); left: 1640px; top: 163px;"></div>
<div id="65" style="background-color: rgb(68, 206, 21); left: 1157px; top: 489px;"></div>
<div id="66" style="background-color: rgb(61, 175, 73); left: 1157px; top: 489px;"></div>
<div id="67" style="background-color: rgb(141, 116, 90); left: 849px; top: 9px;"></div>
<div id="68" style="background-color: rgb(74, 177, 98); left: 148px; top: 500px;"></div>
<div id="69" style="background-color: rgb(222, 50, 114); left: 1651px; top: 276px;"></div>
<div id="70" style="background-color: rgb(73, 179, 184); left: 1097px; top: 96px;"></div>
<div id="71" style="background-color: rgb(79, 82, 139); left: 54px; top: 280px;"></div>
<div id="72" style="background-color: rgb(213, 99, 206); left: 1115px; top: 727px;"></div>
<div id="73" style="background-color: rgb(198, 134, 233); left: 1206px; top: 840px;"></div>
<div id="74" style="background-color: rgb(166, 58, 19); left: 200px; top: 808px;"></div>
<div id="75" style="background-color: rgb(41, 126, 86); left: 1693px; top: 140px;"></div>
<div id="76" style="background-color: rgb(152, 238, 241); left: 794px; top: 435px;"></div>
<div id="77" style="background-color: rgb(179, 140, 126); left: 49px; top: 9px;"></div>
<div id="78" style="background-color: rgb(65, 243, 124); left: 1331px; top: 496px;"></div>
<div id="79" style="background-color: rgb(223, 88, 211); left: 915px; top: 471px;"></div>
<div id="80" style="background-color: rgb(87, 84, 136); left: 422px; top: 163px;"></div>
<div id="81" style="background-color: rgb(17, 209, 61); left: 1442px; top: 507px;"></div>
<div id="82" style="background-color: rgb(95, 186, 148); left: 252px; top: 358px;"></div>
<div id="83" style="background-color: rgb(249, 129, 222); left: 1389px; top: 425px;"></div>
<div id="84" style="background-color: rgb(143, 66, 180); left: 1605px; top: 287px;"></div>
<div id="85" style="background-color: rgb(174, 53, 38); left: 1024px; top: 98px;"></div>
<div id="86" style="background-color: rgb(237, 107, 23); left: 124px; top: 590px;"></div>
<div id="87" style="background-color: rgb(185, 174, 20); left: 1236px; top: 485px;"></div>
<div id="88" style="background-color: rgb(180, 152, 138); left: 1709px; top: 86px;"></div>
<div id="89" style="background-color: rgb(153, 21, 255); left: 813px; top: 207px;"></div>
<div id="90" style="background-color: rgb(199, 233, 85); left: 269px; top: 748px;"></div>
<div id="91" style="background-color: rgb(218, 119, 52); left: 222px; top: 6px;"></div>
<div id="92" style="background-color: rgb(23, 132, 197); left: 1164px; top: 567px;"></div>
<div id="93" style="background-color: rgb(70, 105, 227); left: 70px; top: 559px;"></div>
<div id="94" style="background-color: rgb(78, 114, 20); left: 884px; top: 315px;"></div>
<div id="95" style="background-color: rgb(250, 116, 165); left: 255px; top: 179px;"></div>
<div id="96" style="background-color: rgb(252, 71, 70); left: 1752px; top: 134px;"></div>
<div id="97" style="background-color: rgb(75, 124, 121); left: 1709px; top: 61px;"></div>
<div id="98" style="background-color: rgb(139, 35, 39); left: 1620px; top: 92px;"></div>
<div id="99" style="background-color: rgb(106, 95, 198); left: 1416px; top: 166px;"></div>
</body>
</html>